<template>
  <div class="login_box">
    <el-form class="login_form" ref="loginFormRef" :rules="rules" :model="loginForm">
      <div class="title">登录</div>
      <el-form-item prop="email">
        <el-input size="large" placeholder="邮箱账号" v-model="loginForm.email" clearable>
          <template #prefix>
            <span class="iconfont icon-youxiang"></span>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          size="large"
          placeholder="请输入密码"
          name="password"
          v-model="loginForm.password"
          show-password
        >
          <template #prefix>
            <span class="iconfont icon-password"></span>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="image">
        <el-input
          size="large"
          placeholder="验证码"
          style="width: 200px; float: left"
          v-model="loginForm.image"
          maxlength="4"
        >
          <template #prefix>
            <span class="iconfont icon-yanzhengyanzhengma"></span>
          </template>
        </el-input>
        <el-image
          class="captchaImg"
          style="width: 148px; float: left"
          @click="getCaptcha"
          :src="image"
        />
      </el-form-item>
      <el-form-item>
        <div class="no_account">
          <a href="javascript:void(0)" class="a_link" @click="goToRegister"
            >没有账号?点击注册</a
          >
          <a href="javascript:void(0)" class="a_link" @click="goToResetPassword"
            >忘记密码?点击重置</a
          >
        </div>
      </el-form-item>
      <el-form-item>
        <el-button
          :loading="loading"
          type="primary"
          style="width: 365px; height: 40px"
          @click="loginBtn"
          >登录
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
import { useUserInfoStore } from "@/stores/UserInfoStore";

const router = useRouter();
const { proxy } = getCurrentInstance();
const userInfoStore = useUserInfoStore();

const rules = {
  email: [{ required: true, message: "请输入账号", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
  image: [{ required: true, message: "请输入验证码", trigger: "blur" }],
};

const loginForm = ref({});
const image = ref();
const getCaptcha = async () => {
  const res = await proxy.Api.captcha();
  if (res.code !== 200) {
    proxy.$message.error(res.message);
    return;
  } else {
    image.value = res.data.image;
    localStorage.setItem("checkCodeKey", res.data.uuid);
  }
};
getCaptcha();

const goToRegister = () => {
  router.push("/register");
};

const goToResetPassword = () => {
  router.push("/reset");
};

const loginFormRef = ref();
const loading = ref(false);
const loginBtn = async () => {
  proxy.$refs.loginFormRef.validate((valid) => {
    if (valid) {
      loginForm.value.uuid = localStorage.getItem("checkCodeKey");
      proxy.Api.login(loginForm.value).then((res) => {
        if (res.code != 200) {
          proxy.$message.error(res.message);
          return;
        } else {
          loading.value = true;
          userInfoStore.setInfo(res.data.userVo);
          localStorage.setItem("token", res.data.token);
          proxy.WebSocket.initWs();
          setTimeout(() => {
            loading.value = false;
            router.push("/main");
          }, 2000);
        }
      });
    }
  });
};
</script>

<style lang="scss" scoped>
.login_box {
  width: 400px;
  height: 400px;
  background-color: #fff;
  border-radius: 1px;
  position: absolute;

  .login_form {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;

    .title {
      font-size: 30px;
      line-height: 1.5;
      text-align: center;
      margin-bottom: 30px;
      font-weight: bold;
    }

    .captchaImg {
      height: 38px;
      width: 100%;
      border: 1px solid #e6e6e6;
      margin-left: 8px;
      cursor: pointer;
    }

    .no_account {
      width: 100%;
      display: flex;
      justify-content: space-between;

      .a_link {
        text-decoration: none;
        color: #007fff;
      }
    }
  }
}
</style>
